<template>
  <div class="app-container">
    <div class="app-container_search">
      <div class="search_text">
        <el-input size="small" v-model="queryParams.name" placeholder="请输入评价项" clearable></el-input>
      </div>
      <div class="search_btns">
        <el-button v-preventReClick type="primary" icon="el-icon-search" size="mini" @click="getStudentEvaluateList">搜索</el-button>
        <el-button v-preventReClick icon="el-icon-refresh" size="mini" @click="resetSearch">重置</el-button>
      </div>
    </div>
    <div class="add_btns">
      <el-button type="primary" icon="el-icon-plus" size="mini" @click="addEvaluationDimension">添加评价维度</el-button>
    </div>
    <div class="app-container-header">
      <div class="app-container-header-text">注：每项维度中的评价项至少需要3条</div>
      <div class="app-container-header-btn">
        <el-button :icon="!isClose?'el-icon-circle-plus-outline':'el-icon-remove-outline'" size="mini" @click="handlechange">
          {{ !isClose ? '全部展开' : '全部收起' }}
        </el-button>
      </div>
    </div>
    <div class="app-container-table" v-loading="loading">
      <div class="app-container-table-content">
        <el-tree
          :data="stuEvaluateList"
          node-key="id"
          draggable
          ref="selectTree"
          :default-expand-all="true"
          :expand-on-click-node="true"
          @node-drop="handleDrop"
          :allow-drop="allowDrop"
        >
          <div class="custom-tree-node" slot-scope="{ data }">
            <div class="label" :class="{'ml_16':data.level==2}">{{ data.name }}</div>
            <div v-if="data.level==1" class="btn" @click.stop>
              <i @click="editEvaluate(data)" class="el-icon-edit"></i>
              <i @click="addEvaluateParam(data)" class="el-icon-plus"></i>
              <i @click="delEvaluate(data)" class="el-icon-delete"></i>
            </div>
            <div v-if="data.level==2" class="btn" @click.stop>
              <i @click="editEvaluateParam(data)" class="el-icon-edit"></i>
              <i @click="delEvaluateParam(data)" class="el-icon-delete"></i>
            </div>
          </div>
        </el-tree>
      </div>
    </div>
    <!--  添加维度项  -->
    <el-dialog class="order-dialog"
               :title="submitType==1?'添加评价维度':'修改评价维度'"
               :visible.sync="dimensionOpen"
               width="500px"
               @close="closeDimension"
               :close-on-click-modal="false"
               :close-on-press-escape="false"
               append-to-body
    >
      <el-form ref="dimensionForm" :model="dimensionForm" :rules="dimensionFormRules">
        <el-form-item label="评价项名称" label-width="120px" prop="name">
          <el-input maxlength="7" show-word-limit size="small" v-model="dimensionForm.name" clearable placeholder="请输入评价项名称"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="closeDimension">取 消</el-button>
        <el-button type="primary" @click="submitDimensionForm">确 定</el-button>
      </div>
    </el-dialog>
    <!--  添加维度项  -->
    <el-dialog class="order-dialog"
               :title="submitType==1?'添加评价属性':'修改评价属性'"
               :visible.sync="paramOpen"
               width="500px"
               @close="closeParamOpen"
               :close-on-click-modal="false"
               :close-on-press-escape="false"
               append-to-body
    >
      <el-form ref="paramForm" :model="paramForm" :rules="paramFormRules">
        <el-form-item label="评价项名称" label-width="120px" prop="name">
          <el-input maxlength="10" show-word-limit size="small" v-model="paramForm.name" clearable placeholder="请输入评价项名称"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="closeParamOpen">取 消</el-button>
        <el-button type="primary" @click="submitParamForm">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  getStudentEvaluateList,
  editStudentEvaluate,
  removeStudentEvaluate,
  addStudentEvaluate,
  sortStudentEvaluate,
  addStudentEvaluateParam,
  editStudentEvaluateParam,
  removeStudentEvaluateParam,
  sortStudentEvaluateParam
} from '@/api/configuration/evaluationDimension'

export default {
  name: 'evaluationDimension',
  data() {
    return {
      paramSort: '',
      paramOpen: false,
      loading: false,
      dimensionOpen: false,
      stuEvaluateList: [],
      isClose: true,
      submitType: null,
      categoryId: null,
      //查询参数
      queryParams: {
        name: ''
      },
      // 评价大类
      dimensionForm: {
        name: ''
      },
      // 评价大类规则
      dimensionFormRules: {
        name: [
          { required: true, message: '请输入评价项', trigger: 'blur' }
        ]
      },
      // 评价属性
      paramForm: {
        name: ''
      },
      // 评价属性规则
      paramFormRules: {
        name: [
          { required: true, message: '请输入评价属性', trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    this.getStudentEvaluateList()
  },
  methods: {
    addEvaluateParam(item) {
      this.categoryId = item.id
      this.paramSort = item.children.length + 1
      this.submitType = 1
      this.paramOpen = true
    },
    editEvaluateParam(item) {
      this.paramForm = JSON.parse(JSON.stringify(item))
      this.submitType = 2
      this.paramOpen = true
    },
    closeParamOpen() {
      this.paramForm.name = ''
      this.resetForm('paramForm')
      this.paramOpen = false
    },
    submitParamForm() {
      this.$refs['paramForm'].validate(async valid => {
        if (valid) {
          if (this.submitType == 1) {
            let params = {
              sort: this.paramSort,
              categoryId: this.categoryId,
              name: this.paramForm.name,
              schoolId: this.$store.getters.schoolId
            }
            let res = await addStudentEvaluateParam(params)
            if (res.code == 200) {
              this.$modal.msgSuccess('添加成功')
              this.closeParamOpen()
              this.getStudentEvaluateList()
            }
          } else {
            let params = {
              ...this.paramForm,
              schoolId: this.$store.getters.schoolId
            }
            let res = await editStudentEvaluateParam(params)
            if (res.code == 200) {
              this.$modal.msgSuccess('修改成功')
              this.closeParamOpen()
              this.getStudentEvaluateList()
            }
          }

        }
      })
    },
    async delEvaluateParam(item) {
      this.$confirm(`是否确认删除【${item.name}】？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        let res = await removeStudentEvaluateParam(item.id)
        if (res.code == 200) {
          this.$modal.msgSuccess('删除成功')
          this.getStudentEvaluateList()
        }
      })
    },
    async getStudentEvaluateList() {
      this.loading = true
      let params = {
        name: this.queryParams.name,
        schoolId: this.$store.getters.schoolId
      }
      console.log(params)
      let res = await getStudentEvaluateList(params)
      const { code, data } = res
      if (code == 200) {
        let arr = []
        for (const datum of data) {
          let obj = {
            ...datum,
            level: 1,
            children: []
          }
          if (datum.paramList.length > 0) {
            for (const param of datum.paramList) {
              param.level = 2
              obj.children.push(param)
            }
          }
          arr.push(obj)
        }
        this.stuEvaluateList = arr
        this.loading = false
      } else {
        this.loading = false
      }
    },
    addEvaluationDimension() {
      this.submitType = 1
      this.dimensionOpen = true
    },
    editEvaluate(item) {
      this.submitType = 2
      this.dimensionForm = JSON.parse(JSON.stringify(item))
      this.dimensionOpen = true
    },
    closeDimension() {
      this.dimensionForm.name = ''
      this.resetForm('dimensionForm')
      this.dimensionOpen = false
    },
    submitDimensionForm() {
      this.$refs['dimensionForm'].validate(async valid => {
        if (valid) {
          //新增
          if (this.submitType == 1) {
            let params = {
              sort: this.stuEvaluateList && this.stuEvaluateList.length > 0
                ? this.stuEvaluateList[this.stuEvaluateList.length - 1].sort + 1
                : 1,
              name: this.dimensionForm.name,
              schoolId: this.$store.getters.schoolId
            }
            let res = await addStudentEvaluate(params)
            if (res.code == 200) {
              this.$modal.msgSuccess('添加成功')
              this.closeDimension()
              this.getStudentEvaluateList()
            }
          } else {
            //修改
            let params = {
              ...this.dimensionForm,
              schoolId: this.$store.getters.schoolId
            }
            let res = await editStudentEvaluate(params)
            if (res.code == 200) {
              this.$modal.msgSuccess('修改成功')
              this.closeDimension()
              this.getStudentEvaluateList()
            }
          }
        }
      })
    },
    async delEvaluate(item) {
      this.$confirm(`是否确认删除【${item.name}】？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        let res = await removeStudentEvaluate(item.id)
        if (res.code == 200) {
          this.$modal.msgSuccess('删除成功')
          this.getStudentEvaluateList()
        }
      })
    },
    resetSearch() {
      this.queryParams.name = ''
      this.getStudentEvaluateList()
    },
    expandNodes(nodes) {
      nodes.forEach(node => {
        if (node.childNodes) {
          node.expanded = true // 展开节点
          this.expandNodes(node.childNodes) // 递归展开子节点
        }
      })
    },
    closeNodes(nodes) {
      nodes.forEach(node => {
        if (node.childNodes) {
          node.expanded = false // 关闭节点
          this.closeNodes(node.childNodes) // 递归关闭子节点
        }
      })
    },
    // 展开关闭操作
    handlechange() {
      this.isClose = !this.isClose
      if (this.isClose) {
        this.expandNodes(this.$refs.selectTree.root.childNodes)
      } else {
        this.closeNodes(this.$refs.selectTree.root.childNodes)
      }
    },
    // 拖拽排序
    async handleDrop(draggingNode) {
      if (draggingNode.level == 1) {
        let ids = []
        this.stuEvaluateList.forEach(item => {
          ids.push(item.id)
        })
        let res = await sortStudentEvaluate(ids.join(','))
        const { code } = res
        if (code == 200) {
          this.$modal.msgSuccess('排序成功！')
        }
      } else {
        let ids = []
        let dropArr = []
        this.stuEvaluateList.forEach(item => {
          if (item.children.length > 0) {
            item.children.forEach(childItem => {
              if (draggingNode.id == childItem.id) {
                dropArr = item.children
              }
            })
          }
        })
        dropArr.forEach(item => {
          ids.push(item.id)
        })
        let res = await sortStudentEvaluateParam(ids.join(','))
        const { code } = res
        if (code == 200) {
          this.$modal.msgSuccess('排序成功！')
        }
      }
    },
    //设置子目录可以拖拽
    allowDrop(draggingNode, dropNode, type) {
      //注掉的是同级拖拽
      if (draggingNode.level === dropNode.level) {
        // 获取父节点信息
        const draggingParent = draggingNode.parent
        const dropParent = dropNode.parent
        if (draggingParent !== dropParent) {
          return false
        }
        return type === 'prev' || type === 'next'
      } else {
        // 不同级进行处理
        return false
      }
    }
  }
}
</script>

<style scoped>
::v-deep .el-tree-node__content {
  padding-left: 0 !important;
  border-bottom: 1px solid #f3f3f3;
  height: 56px;
}

::v-deep.order-dialog .el-dialog {
  border-radius: 15px;
}

::v-deep.order-dialog .el-dialog__title {
  font-weight: 600;
}
</style>

<style lang="scss" scoped>
.app-container {
  &_search {
    width: 100%;
    display: flex;
    align-items: center;

    .search_text {

    }

    .search_btns {
      margin-left: 20px;
    }
  }

  .add_btns {
    margin: 10px 0;
  }

  &-header {
    display: flex;
    justify-content: space-between;

    &-text {
      height: 22px;
      font-size: 16px;
      font-family: PingFangSC-Regular, PingFang SC, sans-serif;
      font-weight: 400;
      color: #F89A33;
      line-height: 22px;
    }
  }

  &-table {
    margin: 10px 0;

    .table-item {
      display: flex;
      align-items: center;

      &-img {
        width: 118px;
        height: 72px;
        margin: 0 20px;
        border-radius: 5px;
        overflow: hidden;

        img {
          width: 118px;
          height: 72px;
        }
      }

      &-content {
        div {
          color: #999;
        }
      }
    }

    &-title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      background-color: #f3f5f7;
      height: 56px;
      border-top-left-radius: 10px; /* 左上角 */
      border-top-right-radius: 10px; /* 右上角 */
      font-weight: 600;
      color: #333333;
      margin-bottom: 10px;

      &-box1 {
        text-align: center;
        width: 500px;
        min-width: 260px;
      }

      &-box2 {
        text-align: center;
        flex: 0.2;
        min-width: 120px;
      }

      &-box3 {
        text-align: center;
        flex: 0.2;
        min-width: 120px;
      }

      &-box4 {
        text-align: center;
        flex: 0.2;
        min-width: 160px;
      }

      &-box5 {
        text-align: center;
        flex: 0.2;
        min-width: 200px;
      }

      &-box6 {
        text-align: center;
        flex: 0.2;
        min-width: 200px;
      }
    }

    &-content {
      .el-tree {
        height: calc(100vh - 252px);
        overflow: auto;
      }

      .custom-tree-node {
        width: 100%;
        display: flex;
        align-items: center;
        font-size: 14px;
        padding-right: 8px;
        // border-bottom: 1px solid #f3f3f3;
        .label {
          margin-left: 20px;
          text-align: center;
        }

        .btn {
          margin-left: 20px;
          text-align: center;

          .el-icon-delete {
            margin-left: 8px;
            font-size: 16px;
            color: #28B28B;
          }

          .el-icon-edit {
            font-size: 16px;
            color: #28B28B;
          }

          .el-icon-plus {
            margin-left: 8px;
            font-size: 16px;
            color: #28B28B;
          }
        }
      }
    }
  }
}

.ml_16 {
  margin-left: 36px !important;
}
</style>
